<template>
  <div>
    <list-title :title="name"></list-title>
    <video-player v-if="playerOptions.sources[0].src" ref="videoPlayer" class="video" :options="playerOptions">
    </video-player>
    <div class="each-section-wrap">
      <router-link
        :to="{ path: `/mv/${this.$route.params.id}/details` }"
        replace
        >详情</router-link
      >
      <router-link
        :to="{ path: `/mv/${this.$route.params.id}/mvcomment` }"
        replace
        >评论</router-link
      >
      <router-link
        :to="{ path: `/mv/${this.$route.params.id}/similarMV` }"
        replace
        >相关MV</router-link
      >
    </div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script lang="ts">
import { videoPlayer } from "vue-video-player";
import listTitle from "../../components/listTitle.vue";
import { Vue, Component, Ref, Watch } from "vue-property-decorator";
import Router, { Route } from "vue-router";
import { namespace } from "vuex-class";
import { CommonIdType } from "@/model/id-or-enum.model";
import { APIType } from "@/api";
import { AudioAction } from "@/utils/event";
import { MusicInfo } from "@/model/music-info.model";
const AppModule = namespace("app");
@Component({
  components: {
    listTitle,
    videoPlayer,
  },
})
export default class MVHomeComponent extends Vue {
  name = "";
  playerOptions = {
    // component options
    start: 0,
    playsinline: false,
    // videojs options
    muted: true,
    language: "en",
    playbackRates: [0.7, 1.0, 1.5, 2.0],
    sources: [
      {
        type: "video/mp4",
        src: "",
      },
    ],
    poster: "",
  };

  $api: APIType;
  $route: Route;
  $router: Router;

  @AppModule.State("mvId")
  mvId: CommonIdType;
  @AppModule.State("musicUrlList")
  musicUrlList: MusicInfo[];

  @AppModule.Mutation("setIsPlaying")
  setIsPlaying: (value: boolean) => void;
  @AppModule.Mutation("setShowController")
  setShowController: (value: boolean) => void;

  @Ref("videoPlayer")
  videoPlayer: any;

  get player() {
    return this.videoPlayer.player;
  }

  @Watch("mvId")
  private onMVIdChange(value: CommonIdType, prev: CommonIdType) {
    this.ajax();
  }

  mounted() {
    this.ajax();
  }
  // 导航进入mv页面后，隐藏底部音乐控制器
  beforeRouteEnter(to: Route, from: Route, next: (call?: any) => void) {
    next((vm: MVHomeComponent) => {
      AudioAction.next({ isPlaying: false });
      this.setIsPlaying(false);
      this.setShowController(false);
    });
  }
  // 导航进入mv页面后，显示底部音乐控制器
  beforeRouteLeave(to: Route, from: Route, next: (call?: any) => void) {
    if (this.musicUrlList.length >= 0) {
      this.setShowController(true);
    }
    next();
  }
  ajax() {
    this.$api.getMVDetail(this.$route.params.id).then((res) => {
      return res?.data?.id && this.$api.getMVUrl(res.data.id).then(r => {
        this.playerOptions.sources[0].src = r?.data?.url ?? '';
        this.name = res?.data?.name;
        this.playerOptions.poster = res?.data?.cover;
        this.playerOptions.muted = false;
      });
    });
  }
  goDetails() {
    this.$router.replace({ path: `/mv/${this.$route.params.id}/details` });
  }
  goComment() {
    this.$router.replace({ path: `/mv/${this.$route.params.id}/mvcomment` });
  }
  goSimilar() {
    this.$router.replace({ path: `/mv/${this.$route.params.id}/similarMV` });
  }
}
</script>

<style lang="scss" scoped>
.each-section-wrap {
  display: flex;
  height: 0.8rem;
  line-height: 0.8rem;
  > a {
    flex: 1;
    color: #666;
    line-height: 0.8rem;
    text-align: center;
  }
  .router-link-active {
    color: #df2d2d;
    text-decoration: none;
    border-bottom: 2px solid #df2d2d;
  }
}
.video {
  width: 100vw;
  height: 56.25vw;
  font-size: 0.2rem;

  >.video-js {
    width: 100%;
    height: 100%;
    font-size: inherit;
  }
  .vjs-big-play-button {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -70%);
  }
}
</style>
